<template>
  <div class="index">
    <van-sticky>
      <div style="background-color: rgb(249, 228, 202)">
        <!-- navbar -->
        <circle-nav></circle-nav>
        <!--轮播图 -->
        <div style="text-align: center; margin-top: 10px">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in IndexSwipt">
              <img class="img1" :src="require(`/public/indexswipt/${item}.jpg`)" alt="" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </van-sticky>
    <!-- 宫格 -->
    <div class="gridfather">
      <van-grid clickable :border="false">
        <van-grid-item class="gridson">
          <img class="icon2" src="@/assets/tabbar/smfw.png" alt="" />
          <div>上门服务</div>
        </van-grid-item>
        <van-grid-item>
          <img class="icon2" src="@/assets/tabbar/cwjy.png" alt="" />
          <div>家庭寄养</div>
        </van-grid-item>
        <van-grid-item>
          <img class="icon2" src="@/assets/tabbar/cwmr.png" alt="" />
          <div>宠物美容</div>
        </van-grid-item>
        <van-grid-item>
          <img class="icon2" src="@/assets/tabbar/cwxl.png" alt="" />
          <div>萌宠训练</div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 分割线 -->
    <van-divider :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 2.5% 10px',
      }">萌宠种类</van-divider>

    <!-- 模块化分区 -->
    <div class="f4" v-for="item in bigClass" @click="$router.push(`/small-class/${item.v_id}`)">
      <img :src="UPL + item.v_img" alt="" />
      <div>
        {{ item.v_name }}
      </div>
    </div>

    <!-- 处理tabbar遮挡 -->
    <div style="height: 80px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { indexApi } from "@/http/apis/indexApi";
import baseURL from "@/http/baseURL";

const IndexSwipt = ["banner", "1.banner", "2.banner", "3.banner", "4.banner"]; //轮播图
const UPL = baseURL.UPL + "/upload/";

let bigClass = ref(null); //获取家庭宠物的种类
onMounted(() => {
  indexApi.bigClassify().then((res) => {
    bigClass.value = res.data.data;
  });
});
</script>

<style lang="scss" scoped>
.index {
  background-color: rgb(249, 228, 202);
}

.img1 {
  width: 95%;
  border-radius: 15px;
  height: 200px;
  object-fit: cover;
}

.van-grid-item__content {
  border-radius: 15px;
}

.gridfather {
  font-size: 10px;
  width: 95%;
  margin: 10px auto 0;
  box-shadow: -2px 2px 3px #ccc;
  margin-top: 10px;
}

.icon2 {
  width: 50px;
  height: 50px;
}

.f4 {
  margin-top: 10px;
  margin-left: 2.5%;
  width: 95%;
  text-align: center;
  position: relative;

  img {
    margin-top: 2px;
    width: 100%;
    height: 100px;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #ccc;
    object-fit: cover;
  }

  div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bolder;
  }
}
</style>
